<template>
  <div class="art-header">
    <div class="header-left" @click="back"><span class="iconfont">&#xe624;</span>Back</div>
    <div>{{title}}</div>
    <div class="header-right"><span class="iconfont">&#xe637;</span></div>
  </div>
</template>

<script>
  export default {
    name: "HeaderComponent",
    props:['title'],
    methods: {
      back:function(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped lang="less">
  .art-header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    font-size: 18px;
    color: #ffffff;
    background: #1b1a1f;
    z-index: 2;
    .header-left {
      margin-left: .2rem;
    }
      .header-right {
        margin-right: .2rem;
      }
  }
  .iconfont {
    font-size: 20px;
    font-weight: bold;
  }
</style>
